<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>ces</title>

    <style></style>

    <body>
      <!-- HTML模板 -->
      <div id="app">
        <button @click="showSelector">打开选择器</button>
        <search-select-component
          :visible="isVisible"
          :data="items"
          :selected-data="preSelectedItems"
          :multiple="true"
          @confirm="handleConfirm"
          @close="handleClose"
          @search="handleSearch"
        />
      </div>
      <script src="https://wxapp.jsadf.com/vendor/vue2.prod.bundle.js"></script>

      <script src="./SeachComponent.js"></script>
      <script>
        // 在父组件中使用
        new Vue({
          el: "#app",
          data: {
            isVisible: false,
            items: [
              { id: "项目1", label: "项目1" },
              { id: "项目2", label: "项目2" },
              { id: "项目3", label: "项目3" },
            ],
            preSelectedItems: [{ id: 1, label: "项目1" }],
          },
          components: {
            // 局部注册组件
            SearchSelectComponent: window.SearchSelectComponent,
          },
          methods: {
            showSelector() {
              this.isVisible = true;
            },
            handleConfirm(selected) {
              console.log("选中的项目:", selected);
              this.isVisible = false;
            },
            handleClose() {
              this.isVisible = false;
            },
            handleSearch(searchText) {
              console.log("搜索文本:", searchText);
            },
          },
        });
      </script>
    </body>
  </head>
</html>
